<template>
  <div>
    <div class="item" v-for="item in datas" :key="item.ID">
      <h3 class="header">{{ item.title }}</h3>
      <p class="content">{{ item.content }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import axios from "axios";

export default defineComponent({
    setup() {
  //滚动事件处理函数
  function scrollHandle() {
    ...省略部分代码...

    if (distance <= 200) {
      console.log("快到底了！");
      loadMore(); //多次触发没关系，加载完之前只能有一个实际执行
    }
  }

  onMounted(...);
  onUnmounted(...);

  const datas = ref([]);

  let readyForLoad = true; //默认允许加载一次

  loadMore(); //初始加载一次
  function loadMore() {
    if (readyForLoad) {
      //需要加载才进来，防止重复
      readyForLoad = false; //进来了就"锁上"

      axios("/datas.json").then((res) => {
        datas.value = [...datas.value, ...res.data];
        readyForLoad = true; //加载完了才"开锁"，允许再次触发
      });
    }
  }

  return {
    datas, //输出到页面中使用
  };
},
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
} /* scoped-局部样式 */
.item {
  box-sizing: border-box;
  width: 350px;
  height: 180px;
  padding: 20px 20px;
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: -1px; /* 上下边框合并一下 */
}
.header {
  /* margin-bottom: 20px; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 30px;
}
.content {
  color: #999;
  font-size: 14px;
  line-height: 26px;
  height: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}
</style>
